<?php if(isset($items) && sizeof($items) > 0): ?>
<?php //kpr($items); ?>

<div id="category_slider">
  <div class="left" style="float:left;"></div>
  <div class="navbar" >

    <div class="navbar-inner" >

      <div style="overflow: visible; " class="dragscroll-container" id="container">

        <div class="dragscroll-scroller" style="width:<?php print count($items) * (120 + 20); ?>px">
          <div class="dragscroll-inner">
            <div class="inner">

              <ul class="clearfix top-slider" >
                <?php foreach($items as $item) : ?>
                <li>
                  <?php
                  $image = field_view_field('lonex_category', $item, 'field_category_image');
                  $image['#label_display'] = 'hidden';
                  print render($image);
//                  print '<a>' . $item->title . '</a>';

                  print l($item->title, 'catalog/' . $item->cid,
                    array('html' => true, 'attributes' => array('class' => array('slider-link'))));
//                  print l(render($image) . '<div>' . $item->title . '</div>', 'catalog/' . $item->cid,
//                    array('html' => true, 'attributes' => array('class' => array('slider-link')))); ?>
                </li>
                <?php endforeach; ?>
              </ul>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="right" style="float:right;"></div>

</div>


<script>
  $(document).ready(function(){
    $('.left-holder').append($('.left'));
    $('.right-holder').append($('.right'));

    $('#container').dragscroll(
      {
        scrollClassName: 'example-3',
        autoFadeBars: false,
        scrollBars: true,
        smoothness: 15,
        mouseWheelVelocity: 2
      });

    $('#container').data("dragscroll").setScrollbar();
  });

  $('.right').click(function() {
    sliderMove2(50);
    return false;
  });

  $('.left').click(function() {
    sliderMove2(-50);
    return false;
  });

  function sliderMove2(direction) {
    var obj = $('#container').data("dragscroll");
    var temp_left = obj.scrollElem[0].scrollLeft;
    var left = obj.scrollElem[0].scrollLeft + direction;

    var inter = setInterval(function() {
      if ((direction > 0 && temp_left >= left) || (direction < 0 && temp_left <= left)) {
        clearInterval(inter);
      }
      else {
        if(direction > 0) {
          temp_left = temp_left + 5;
        }
        else {
          temp_left = temp_left - 5;
        }

        obj.scrollElem[0].scrollLeft = temp_left;
        obj.events.SCROLL;
        obj.setScrollbar();
        obj._getDiff();
      }
    }, 1);
  }

  //  function sliderMove(direction) {
  //    var obj = $('#container').data("dragscroll");
  //    var right = obj.scrollElem[0].scrollLeft + direction;
  //    var top = obj.scrollElem[0].scrollTop;
  //
  //
  //    obj.scrollElem[0].scrollLeft = right;
  //    obj.scrollElem[0].scrollTop = top;
  //
  //    obj.events.SCROLL;
  //    obj.setScrollbar();
  //    obj._getDiff();
  //  }

</script>


<?php

endif; ?>

